<template>
    <Content title="操作工选择">
        <view class="common-operator_container">
            <view class="common-operator_content">
                <view class="common-operator_search">
                    <u-search placeholder="请输入姓名或者工号进行搜索" v-model="search.empno" :clearabled="true" :showAction="false"
                        @search="filter"></u-search>
                </view>
                <view class="common-operator_list">
                    <List ref="list" :storageKey="storageKey" :localData="data" :multiple="multiple" @change="change">
                    </List>
                </view>
                <view class="common-operator_label">
                    已选中({{selections.length}})：
                </view>
                <view class="common-operator_selections">
                    <u-tag class="tag" shape="circle" size="large" v-for="(item, index) in selections" :key="index"
                        :text="item.name" :closable="true" closeColor="#666666" @close="close(item)"></u-tag>
                </view>
            </view>
            <view class="btn-v">
                <view class="but-box">
                    <u-button class="btn" text="取消" @click="cancel"></u-button>
                    <u-button :throttleTime="300" class="btn" type="primary" @click="ok" text="确定"></u-button>
                </view>
            </view>
        </view>
    </Content>
</template>

<script>
    import Content from "@/components/content/index";
    import fetch from "@/utils/fetch";
    import List from "./components/list";

    export default {
        components: {
            Content,
            List,
        },
        data() {
            return {
                multiple: true,
                storageKey: 'OperatorSelections', // 默认为 OperatorSelections
                search: {
                    empno: "",
                    pageNum: 1,
                    pageSize: 15,
                },
                data: [],
                selections: [],
            };
        },
        methods: {
            close(item) {
                this.$refs.list.unselected(item);
            },
            change(val) {
                this.selections = val;
                this.data = [...this.data];
            },
            cancel() {
                uni.navigateBack({
                    delta: 1,
                });
            },
            ok() {
                const that = this;
                if (that.selections && that.selections.length > 0) {
                    const storageData = that.data.filter(item => {
                        return that.selections.includes(item);
                    });
                    console.log('storage data =>', storageData);
                    uni.setStorageSync(that.storageKey, storageData);
                    uni.navigateBack({
                        delta: 1
                    });
                } else {
                    uni.$emit("openToast", {
                        type: "error",
                        icon: "error",
                        title: "请选中一条数据!",
                    });
                }
            },
            filter() {
                this.data.forEach(item => {
                    item.hide = (item.name + item.empno).indexOf(this.search.empno) === -1;
                });
                this.data = [...this.data];
            },
            getList() {
                const that = this;
                that.$loading.open();
                that.data = [];
                return fetch("post", "/dms/workOrder/getUsers", that.search).then(({
                    data
                }) => {
                    that.data =
                        data.map((item) => {
                            return {
                                ...item,
                                name: item.realname,
                            };
                        }) || [];
                    const selections = uni.getStorageSync(that.storageKey) || [];
                    this.selections = selections;
                    for (let i = 0; i < selections.length; i++) {
                        const selection = selections[i];
                        for (let j = 0; j < that.data.length; j++) {
                            const item = that.data[j];
                            if (selection.id === item.id) {
                                item.selected = true;
                            }
                        }
                    }
                    that.$loading.close();
                });
            },
        },
        onLoad: function(option) {
            if (option.storageKey) this.storageKey = option.storageKey;
            if (option.keyword) this.search.empno = option.keyword;
            if (option.multiple) this.multiple = option.multiple === "true";
        },
        onReady: function() {
            this.getList();
        },
    };
</script>

<style scoped lang="scss">
    .common-operator_container {
        height: calc(100% - 82px);
        overflow: auto;

        .common-operator_content {
            height: 100%;
            display: flex;
            flex-direction: column;

            .common-operator_search {
                flex: 0 auto;
                background-color: #ffffff;
                border-bottom: 1px solid #eee;
                padding: 20rpx;
            }

            .common-operator_label {
                font-weight: bold;
                padding: 20rpx 30rpx;
            }

            .common-operator_selections {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                padding: 0 20rpx;

                .tag {
                    margin: 0 10rpx 10px 0;
                }
            }

            .common-operator_list {
                flex: 1;
                overflow: auto;
            }
        }
    }
</style>